<template>
	<view v-if="list && list.length > 0" class="cu-card article" :class="props.isCard ? 'no-card' : ''">
		<view v-for="(item, index) in list" :key="index" :data-index="index" :data-value="item" @click="handleSelect" class="cu-item shadow">
			<view class="content margin-top-sm">
				<image v-if="item.coverUrl" :src="item.coverUrl" mode="aspectFit"></image>
				<view v-else class="bg-image">
					<text class="image-title">{{ item.title }}</text>
				</view>
				<view class="desc">
					<view class="item-title">{{ item.title }}</view>
					<view v-if="item.patent == 1" class="flex text-black">
						<text class="text-title">作者：</text>
						<text class="text-sigle text-value">{{ item.inventor }}</text>
					</view>
					<view v-else class="flex text-black">
						<text class="text-title">发明人：</text>
						<text class="text-sigle text-value">{{ item.inventor }}</text>
					</view>
					<view class="flex text-black">
						<text class="text-title">所属单位：</text>
						<text class="text-sigle text-value">{{ item.companyName }}</text>
					</view>
					<view class="flex text-black">
						<text class="text-title">申请时间：</text>
						<text class="text-sigle text-value">{{ item.releaseDate }}</text>
					</view>
					<view class="flex text-black">
						<text class="text-title">类型：</text>
						<text class="text-sigle text-value">{{ item.patentTypeName }}</text>
					</view>
					<!-- <view>
						<view class="cu-tag bg-red light sm round">热门</view>
						<view class="cu-tag bg-green light sm round">前10名</view>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { useSettingStore } from '@/stores/index';
const setting = useSettingStore();
const emit = defineEmits(['action']);
const props = defineProps({
	isCard: {
		type: [Boolean, String],
		default: false
	},
	list: Array
});
const handleSelect = (e: any) => {
	emit('action', e.currentTarget.dataset.value);
};
</script>

<style lang="scss">
.cu-item {
	border: 1px solid #efefef;
}

.cu-card > .cu-item {
	display: block;
	background-color: #ffffff;
	overflow: hidden;
	border-radius: 10rpx;
	background: #ffffff;
	box-shadow: 0px 0px 4px 0px rgba(203, 203, 203, 0.5);
	border-radius: 8px;
}
.text-title {
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 17px;
}
.text-value {
	width: 6rem;
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 17px;
}
.item-title {
	font-size: 14px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 20px;
	letter-spacing: 1px;
}
.cu-card.article > .cu-item .content > image {
	width: 80px;
	background: #fff;
	height: 6.4em;
	margin-right: 20rpx;
	border-radius: 4rpx;
}
.bg-image {
	width: 80px;
	background: #0660c9;
	height: 6.4em;
	margin-right: 20rpx;
	border-radius: 6rpx;
	padding: 10px;
	text-align: center;
	.image-title {
		color: #fff;
		writing-mode: tb-rl;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		height: 6.6em;
		font-size: 12px;
	}
}
.cu-card.article > .cu-item .content .desc {
	justify-content: start;
}
</style>
